<template>
    <el-dialog :title="dialogTitle" :close-on-click-modal="false" :visible.sync="visible" :destroy-on-close="destroyOnClose"
        class="SHZY-dialog SHZY-dialog_center zIndex" custom-class="el-dialog-s" :append-to-body="appenToBody"
        :before-close="beforeClose" lock-scroll :width="width">
        <slot></slot>
        <span slot="footer" class="dialog-footer" v-if="showBtn">
            <el-button @click="$emit('update:visible', false)">取 消</el-button>
            <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    props: {
        dialogTitle: String,
        visible: Boolean,
        emitEvent: String,
        width: {
            default: '600px',
            type: String
        },
        destroyOnClose: {
            default: false,
            type: Boolean
        },
        appenToBody: {
            default: false,
            type: Boolean
        },
        showBtn: {
            default: true,
            type: Boolean
        }
    },
    data() {
        return {
            btnLoading: false
        }
    },
    created() {

    },
    methods: {
        dataFormSubmit() {
            this.btnLoading = true
            this.$emit(this.emitEvent);
            this.btnLoading = false
        },
        beforeClose() {
            this.$emit('update:visible', false)
        }
    }
}
</script>

<style lang="scss" scoped>
.min-height {
    min-height: 500px;
}

// ::v-deep .el-dialog .el-dialog__body {
//     padding: 0px 0px !important;
// }

.el-dialog-s {
    z-index: 9999999999999999;
}
</style>

